<script setup>
import {reactive, watch} from "vue";
import {emigrationStore} from '@pi/emigration';
import {msg} from "@ut/tool.js";

let emigration = emigrationStore();
let props = defineProps({
    show: {type: Boolean, default: false},
});
let options = reactive({pageNo: 1, pageSize: 10});
let state = reactive([
    {label: '待处理', type: 'warning'},
    {label: '已处理', type: 'success'}
]);

watch(() => props.show, e => {
    if (e) {
        options.pageNo = 1;
        emigration.get(options);
    }
}, {immediate: true});

// 下载附件
function download(url) {
    if (url) window.open(url);
    else msg('未上传附件', 'warning');
}

// 同意
async function update(row) {
    let form = {...row, state: 1}
    delete form.executorUser;
    delete form.user;
    await emigration.update(form);
    emigration.get(options);
}

// 删除
async function remove(id) {
    await emigration.remove(id);
    emigration.get(options);
}
</script>

<template>
    <el-table :data="emigration.list" style="height: calc(100% - 40px)" size="small" border stripe show-overflow-tooltip>
        <el-table-column prop="id" label="编号" align="center" />
        <el-table-column label="学生信息" align="center">
            <el-table-column prop="user.nickname" label="姓名" align="center" />
            <el-table-column prop="user.phone" label="电话" align="center" />
        </el-table-column>
        <el-table-column prop="content" label="迁出原因" align="center" />
        <el-table-column prop="time" label="申请时间" align="center" />
        <el-table-column label="状态" align="center">
            <template #default="scope">
                <el-tag :type="state[scope.row.state].type">{{state[scope.row.state].label}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="办理人" align="center">
            <el-table-column prop="executorUser.nickname" label="姓名" align="center" />
            <el-table-column prop="executorUser.phone" label="电话" align="center" />
        </el-table-column>
        <el-table-column prop="et" label="处理时间" align="center" />
        <el-table-column label="操作" align="center" width="240" fixed="right">
            <template #default="{row}">
                <el-button type="primary" link icon="Delete" @click="download(row.file)">下载附件</el-button>
                <el-button type="success" link icon="Edit" @click="update(row)" :disabled="row.state === 1">同意</el-button>
                <el-button type="danger" link icon="Delete" @click="remove(row.id)" :disabled="row.state === 0">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="emigration.total" small @current-change="emigration.get(options)" v-model:current-page="options.pageNo" :page-size="options.pageSize" />
    </div>
</template>

<style scoped lang="less">

</style>